<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局-换行</title>
	<style type="text/css">
	.flex-box{ display: flex; background-color: #ccc;}
	.flex-box .flex-item{ width: 50%; height: 60px; background-color: blue;}
	</style>
	<style type="text/css">
	.flex-box1{ flex-wrap: nowrap;}
	.flex-box2{ flex-wrap: wrap;}
	.flex-box3{ flex-wrap: wrap-reverse;}
	</style>
</head>
<body>
	<div>nowrap（默认）：不换行</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>wrap:换行，第一行在上方</div>
	<div class="flex-box flex-box2">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>wrap-reverse:换行，在第一行的下方</div>
	<div class="flex-box flex-box3">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
</body>
</html>